<template>
  <div class="playground">
    <a-row>
      <a-col :span="8">
        <template class="center">
          <a-avatar
            :size="{
              xs: 24,
              sm: 32,
              md: 40,
              lg: 64,
              xl: 80,
              xxl: 100,
              xxxl: 128,
            }"
            :src="$store.state.user.info.avatar"
          >
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <h2 style="margin-left: 20px">
            {{ $store.state.user.info.username }}
          </h2>
        </template>
      </a-col>

      <a-col :span="8">
        <template class="center">
          <a-select
            v-model:value="bot_id"
            style="width: 15vw"
          >
            <a-select-option value="-1">亲自上阵</a-select-option>
            <a-select-option v-for="bot in dataSource" :key="bot.id" :value="bot.id">{{bot.title}}</a-select-option>
          </a-select>
        </template>
      </a-col>

      <a-col :span="8">
        <template class="center">
          <h2 style="margin-right: 20px">{{ $store.state.pk.username }}</h2>

          <a-avatar
            :size="{
              xs: 24,
              sm: 32,
              md: 40,
              lg: 64,
              xl: 80,
              xxl: 100,
              xxxl: 128,
            }"
            :src="$store.state.pk.avatar"
          >
            <template #icon><UserOutlined /></template>
          </a-avatar>
        </template>
      </a-col>

      <a-col :span="6" :offset="9">
        <template class="center">
          <a-button
            :danger="btn_msg === '开始匹配' ? false : true"
            type="primary"
            block
            @click="click_btn()"
          >
            {{ btn_msg }}
          </a-button>
        </template>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { UserOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { ref } from "@vue/reactivity";
import botApi from '@/apis/botApi';
import { onMounted } from '@vue/runtime-core';
export default {
  name: "MatchView",
  components: {
    UserOutlined,
  },

  setup() {
    const store = useStore();

    const access = store.state.user.info.access;

    const btn_msg = ref("开始匹配");

    // 出征方式 -1 亲自出马   其他 bot ID
    const bot_id = ref("-1");

    const dataSource = ref([]);

    const get_bots = () => {
      botApi.getBots(access).then((resp) => {
        dataSource.value = resp.data.bots;
      });
    };

    onMounted(() => {
      get_bots()
    })

    const click_btn = () => {
      if (btn_msg.value === "开始匹配") {
        btn_msg.value = "取消";
        store.state.pk.socket.send(
          JSON.stringify({
            event: "start",
            bot_id: bot_id.value,
          })
        );
      } else {
        btn_msg.value = "开始匹配";
        store.state.pk.socket.send(
          JSON.stringify({
            event: "stop",
          })
        );
      }
    };

    return {
      btn_msg,
      bot_id,
      dataSource,

      click_btn,
      get_bots,
    };
  },
};
</script>

<style scoped>
div.playground {
  width: 60vw;
  height: 70vh;
  margin: 40px auto;
  background-color: rgba(50, 50, 50, 0.5);
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40vh;
}
</style>